<template>
    <div class="search-list-container searchHeight">
        <div class="search-wrapper">
            <el-form size="small" :inline="true" label-width="auto">
                <el-form-item label="单位：" prop="applicant">
                    <el-input v-model="applicant" placeholder="请输入" clearable />
                </el-form-item>
                <el-form-item label="账号:">
                    <el-input v-model="account" placeholder="请输入" clearable />
                </el-form-item>
                <el-form-item label="所属服务ID:">
                    <el-input v-model="VPNServiceID" placeholder="请输入" clearable />
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" class="search-icon" style="margin-left: 100px;"
                    @click="VPNSearch()">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="VPNResetting()">重置</el-button>
            </el-form>
        </div>
        <div class="list-wrapper">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="VPNAccAdd"
                       >新增</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" icon="el-icon-delete" size="mini" :disabled='multiple ? false : true' :key="1"
                        @click="VPNAccDeleteArr({})" >删除</el-button>
                </el-col>
            </el-row>
            <el-table ref="tables" width="100%" height="100%" :data="accountList" @selection-change="vpnAccDelid"
                :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="单位" align="center" prop="unit" :required="true" width="80">
                </el-table-column>
                <el-table-column label="账号" align="center" prop="accountName" :show-overflow-tooltip="true" width="80" />
                <el-table-column label="使用人" align="center" prop="person" :show-overflow-tooltip="true" width="80">
                </el-table-column>
                <el-table-column label="部门" align="center" prop="department" width="80" />
                <el-table-column label="生效时段" align="center" prop="validTime" :show-overflow-tooltip="true" />
                <el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true" width="80" />
                <el-table-column label="所属服务ID" align="center" width="150" prop="vpnserviceId"
                    :show-overflow-tooltip="true">
                </el-table-column>

                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220" fixed="right">
                    <template slot-scope="scope">
                        <el-button @click="vpnAccDetails(scope.row)" type="text" size="small"
                            icon="el-icon-view">详情</el-button>
                        <el-button @click="vpnAccModify(scope.row)" type="text" size="small"
                            icon="el-icon-edit">修改</el-button>
                        <el-button @click="handleClick(scope.row)" type="text" size="small"
                            icon="el-icon-notebook-2">授权</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页器 -->
        <div :class="{ 'hidden': hidden }" class="pagination-container">
            <el-pagination :background="background" :current-page.sync="currentPage" :page-size="10"
                layout='total, sizes, prev, pager, next, jumper' :page-sizes="[10, 20, 30, 40, 50]"
                :pager-count="pagerCount" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>


        <VPNDialog :showDialog.sync="showAddSegmentDialog" :isAdd="isAdd" v-if="showAddSegmentDialog" :isUpdata="isUpdata"
            :accountList="accountList" :idlist="idList" :vpnIdDel="vpnIdDel" :isDetails="isDetails" :isModify="isModify" />
    </div>
</template>
  
<script>
import VPNDialog from "./vpnAccountAdd.vue";
import { vpnAccountPage, getIdList, vpnAccountdel, vpnAccDetail } from "@/api/vpnManage/vpnManage.js";
export default {
    data() {
        return {
            multiple: '',
            applicant: '',//单位
            account: '',//账号
            VPNServiceID: '',//服务ID
            accountList: [
                {
                    unit: '',
                    accountName: '',
                    person: '',
                    department: '',
                    validTime: "",
                    status: '',
                    vpnserviceId: "",
                }
            ],
            query: {
                pageNum: 1,
                pageSize: 10
            },
            isAdd: 0,
            showAddSegmentDialog: false,
            isUpdata: false,
            total: 0,
            hidden: false,
            background: false,
            currentPage: 1,
            pagerCount: document.body.clientWidth < 992 ? 5 : 7,
            idList: [],
            delArr: [],
            vpnIdDel: '',
            isDetails: false,
            isModify: false,

        };
    },
    components: {
        VPNDialog
    },
    provide() {
        return {
            updata: this.getVPNAccList,
        }
    },
    methods: {


        async getVPNAccList() {
            this.query = {
                ...this.query,
                VPNServiceId: this.VPNServiceID,
                unit: this.applicant
            }
            let result = await vpnAccountPage(this.query)
            let IDresult = await getIdList()
            this.idList = IDresult.data
            this.total = result.data.total
            this.accountList = result.data.records
        },
        //新增
        VPNAccAdd() {
            this.accountList = ''
            this.isUpdata = true
            this.isAdd = 0,
                this.showAddSegmentDialog = true
            this.isModify = false,
                this.isDetails = false

        },
        //批量删除
        VPNAccDeleteArr() {
            this.$confirm("是否确认删除所选的数据项?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.delArr.filter(async (item) => {
                    let result = await vpnAccountdel(item.id)
                    if (result.code == 200) {
                        this.getVPNAccList()
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                    }
                })
            })
        },
        //单选框
        vpnAccDelid(value) {
            this.delArr = value
            if (value.length) {
                this.multiple = true;
            } else {
                this.multiple = false;
            }
        },
        //授权
        async handleClick(value) {
            this.vpnIdDel = value.id
            this.isUpdata = false;
            this.isAdd = 4,
                this.showAddSegmentDialog = true
        },
        //搜索
        async VPNSearch() {
            const query = {
                VPNServiceId: this.VPNServiceID,
                accountName: this.account,
                unit: this.applicant,
                pageNum: 1,
                pageSize: 10
            }
            let result = await vpnAccountPage(query);
            this.total = result.data.total
            this.accountList = result.data.records
        },
        //重置
        async VPNResetting() {
            this.VPNServiceID = ''
            this.account = ''
            this.applicant = ''

            let result = await vpnAccountPage(this.query)
            let IDresult = await getIdList()
            this.idList = IDresult.data
            this.total = result.data.total
            this.accountList = result.data.records
        },
        //分页器
        handleSizeChange(val) {
            if (this.currentPage * val > this.total) {
                this.currentPage = 1
            }
            this.$emit('pagination', { page: this.currentPage, limit: val })
            if (this.autoScroll) {
                scrollTo(0, 800)
            }
        },
        handleCurrentChange(val) {
            this.query.pageNum = val
            this.getVPNAccList()
            if (this.autoScroll) {
                scrollTo(0, 800)
            }
        },
        //修改
        async vpnAccModify(val) {
            const result = await vpnAccDetail(val.id)
            this.accountList = result.data
            this.isModify = true
            this.isDetails = false
            this.isUpdata = true
            this.isAdd = 2
            this.showAddSegmentDialog = true
        },
        //详情
        async vpnAccDetails(val) {
            const result = await vpnAccDetail(val.id)
            this.accountList = result.data
            this.isModify = false
            this.isDetails = true
            this.isUpdata = true
            this.isAdd = 1
            this.showAddSegmentDialog = true
        }
    },
    computed: {

    },
    mounted() {
        this.getVPNAccList();
    },
};
</script>
  
<style lang="scss" scoped>
.searchHeight {
    height: calc(100% - 54px) !important;
}

.search-icon {
    margin-left: 30px !important;
}

::v-deep .el-upload {
    text-align: left;
}

::v-deep .el-upload div {
    margin: 10px 0;
}

.pagination-container {
    /* background: #fff; */
    padding: 32px 16px;
}

.pagination-container.hidden {
    display: none;
}

::v-deep .el-input__inner {
    width: 108%;
}
</style>